<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2-org-tree 功能说明</title>
<script src="./js/vue.min.js"></script>
<script src="./org_tree/org_tree.js"></script>
<link rel="stylesheet" href="./org_tree/org_tree.css">
<style>
.org-tree-node-label .org-tree-node-label-inner {
	height: 36px !important;
	padding: 0 !important;
	line-height: 36px;
}
.span-text {
	width: 100%;
	height: 100%;
	/* padding: 0; */
	padding: 0 6px;
	display: block;
	border-radius: 3px;
	color: #FFFFFF;
}
.horizontal .org-tree-node-label {
	width: 190px !important;
}
.floating{
	background: rgba(0, 0, 0, 0.7);
	width: 160px;
	height: 100px;
	position: absolute;
	color: #fff;
	padding-top: 15px;
	border-radius: 15px;
	padding-left: 15px;
	box-sizing: border-box;
	left:0;
	top: 0;
	transition: all 0.3s;
	z-index: 999;
	text-align: left;
	font-size: 12px;
}

</style>
</head>
<body>
	<!-- vue中树状组织架构插件：		https://blog.csdn.net/weixin_47941995/article/details/126617885 -->
	<!-- 详解树状结构图 vue-org-tree（知乎）：		https://zhuanlan.zhihu.com/p/117300250 -->
	<div id="app">
		<h3>自定义单元</h3>
		<vue2-org-tree :data="treeData" :render-content="renderContentDiy"></vue2-org-tree>
		
		<hr>
		<h3>自定义功能</h3>
		<button @click="allStatus">全部 展开 / 收起</button><br>
		<vue2-org-tree :data="treeData" :render-content="renderContent" @on-node-click="clickNode" :horizontal="false":label-class-name="labelClassName" 
		collapsable @on-expand="onExpand" @on-node-mouseover="onMouseover" @on-node-mouseout="onMouseout"></vue2-org-tree>
		
		<!-- 点击时显示点击的内容 -->
		<p v-show="isShow">{{info}}</p>
		
		<!-- 创建浮窗盒子 鼠标移入移出 -->
		<div v-show="BasicSwich" class="floating">
			<p>部门：{{BasicInfo.name}}</p>
			<p>简介：{{BasicInfo.describe}}</p>
		</div>
	</div>
<!-- vue2-org-tree说明：
horizontal 是水平排列方式，我们来实践一下吧，它的参数是true、false 
使用 label-class-name 我们还可以动态绑定自定义class
collapsable 折叠展示效果
@on-expand="onExpand" 展开实现
@on-node-mouseover="onMouseover" 鼠标移入
@on-node-mouseout="onMouseout" 鼠标移出
-->
</body>
<script>
// 阻止 Vue 在启动时生成生产提示
Vue.config.productionTip = false;
const data = {
	"name": "主体",
	"status": 1, //不同的状态，显示不同的背景颜色
	"expand": true, //控制是否展开，true展开，false收起（实测发现用1和0也可以）
	"describe": "武汉市企桥商务服务有限公司",
	"imageUrl": "http://10.32.145.121:8080/bomc/data/img/1.png",
	"children": [
		{
			"name": "人事部",
			"status": 0,
			"describe": "企桥人事部",
			"imageUrl": "http://10.32.145.121:8080/bomc/data/img/2.png",
			"children": null,
		},
		{
			"name": "财务部",
			"status": 0,
			"describe": "企桥财务部",
			"imageUrl": "http://10.32.145.121:8080/bomc/data/img/1.png",
			"children": [
				{
					"name": "财务室",
					"status": -1,
					"describe": "OVU12楼财务室",
					"imageUrl": "http://10.32.145.121:8080/bomc/data/img/4.png",
					"children": null,
				},
				{
					"name": "仓库",
					"status": -1,
					"describe": "仓库全体人员",
					"imageUrl": "http://10.32.145.121:8080/bomc/data/img/4.png",
					"children": null,
				},
			]
		}
	]
}
let vm = new Vue({
	el: '#app',
	data: {
		treeData: {},
		labelClassName:"diy-class",
		isShow: true,
		expand_status: true,
		info: '',
		BasicSwich: false,
		BasicInfo:{name: null, describe: null},
	},
	mounted() {
		this.treeData = data;
	},
	methods: {
		renderContentDiy(h, data){
			return h('div', {style:{width:'auto',height:'auto',background:'#ccc'}}, data.name);
		},
		renderContent: function name(createElement, data) {
			const elHtml = createElement('span', {
				attrs: {
					'class': 'span-text',
					'style': data.status === 1 ? 'background-color: #d00d4b;' : (data.status === 0 ? 'background-color: green;' : (data.status === -1 ? 'background-color: #00aaff;' : 'background-color: red;'))
				}
			}, data.name)
			return elHtml
		},
		//点击节点
		clickNode(e, node) {
			console.log(node);
			this.isShow = true;
			this.info = "点击了：" + node.name;
		},
		//鼠标移入
		onMouseover(e, node){
			console.log("鼠标移入", node);
			this.BasicSwich = true;
			this.BasicInfo = node;
			var floating =  document.getElementsByClassName('floating')[0];
			floating.style.left = e.clientX +'px';
			floating.style.top = e.clientY+'px';
		},
		//鼠标移出
		onMouseout(e, node){
			console.log("鼠标移出", node);
			this.BasicSwich = false;
		},
		//收起
		collapse(list) {
			var _this = this;
			list.forEach(function(child) {
				if(child.expand){
					child.expand = false;
				}
				child.children && _this.collapse(child.children);
			});
		},
		// 展开
		onExpand(e,data) {
			if ("expand" in data) {
				data.expand = !data.expand;
				if (!data.expand && data.children) {
					this.collapse(data.children);
				}
			} else {
				this.$set(data, "expand", true);
			}
		},
		//全部 展开/收起
		toggleExpand(data, val) {
			var _this = this;
			if(Array.isArray(data)){
				data.forEach(function(item) {
					_this.$set(item, "expand", val);
					if(item.children){
						_this.toggleExpand(item.children, val);
					}
				});
			}else{
				this.$set(data, "expand", val);
				if(data.children){
					_this.toggleExpand(data.children, val);
				}
			}
		},
		//执行 展开 / 收起
		allStatus(){
			this.expand_status = !this.expand_status;
			this.toggleExpand(this.treeData, this.expand_status)
		},
	},
})


</script>
</html>